
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-sirendingzhikongxin"></i>
                    <div class="name">钻石</div>
                    <div class="fontclass">.icon-sirendingzhikongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaicon"></i>
                    <div class="name">cha icon</div>
                    <div class="fontclass">.icon-chaicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mubiaobazi"></i>
                    <div class="name">目标靶子</div>
                    <div class="fontclass">.icon-mubiaobazi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chengshi"></i>
                    <div class="name">城市</div>
                    <div class="fontclass">.icon-chengshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinrimubiao"></i>
                    <div class="name">靶子</div>
                    <div class="fontclass">.icon-jinrimubiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jichuxinxi"></i>
                    <div class="name">基础信息</div>
                    <div class="fontclass">.icon-jichuxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sirendingzhishixin"></i>
                    <div class="name">钻石</div>
                    <div class="fontclass">.icon-sirendingzhishixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingbie"></i>
                    <div class="name">性别</div>
                    <div class="fontclass">.icon-xingbie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontarrows1"></i>
                    <div class="name">下箭头</div>
                    <div class="fontclass">.icon-iconfontarrows1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loading-copy"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.icon-loading-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-richangjilu"></i>
                    <div class="name">记事本 日志</div>
                    <div class="fontclass">.icon-richangjilu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengzhuangqingli"></i>
                    <div class="name">餐盘_线</div>
                    <div class="fontclass">.icon-zhengzhuangqingli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zaixianfuwu"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-zaixianfuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shentizhengzhuang"></i>
                    <div class="name">心电图</div>
                    <div class="fontclass">.icon-shentizhengzhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weishengsu"></i>
                    <div class="name">VC</div>
                    <div class="fontclass">.icon-weishengsu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinliaofangshixin"></i>
                    <div class="name">房子 实心</div>
                    <div class="fontclass">.icon-xinliaofangshixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mingzi"></i>
                    <div class="name">记事本</div>
                    <div class="fontclass">.icon-mingzi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huati"></i>
                    <div class="name">话题</div>
                    <div class="fontclass">.icon-huati</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fasong"></i>
                    <div class="name">发送</div>
                    <div class="fontclass">.icon-fasong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupianzhengzaijiazai"></i>
                    <div class="name">图片正在加载</div>
                    <div class="fontclass">.icon-tupianzhengzaijiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianpan"></i>
                    <div class="name">键盘</div>
                    <div class="fontclass">.icon-jianpan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuyin"></i>
                    <div class="name">语音</div>
                    <div class="fontclass">.icon-yuyin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodeshoucang"></i>
                    <div class="name">收 藏</div>
                    <div class="fontclass">.icon-wodeshoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-rili</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-moren"></i>
                    <div class="name">默认</div>
                    <div class="fontclass">.icon-moren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tijian1"></i>
                    <div class="name">打卡</div>
                    <div class="fontclass">.icon-tijian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangpin"></i>
                    <div class="name">商品</div>
                    <div class="fontclass">.icon-shangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dunpai"></i>
                    <div class="name">盾牌</div>
                    <div class="fontclass">.icon-dunpai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangweiceshi"></i>
                    <div class="name">进行时钟</div>
                    <div class="fontclass">.icon-shangweiceshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahao"></i>
                    <div class="name">加号</div>
                    <div class="fontclass">.icon-jiahao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-muying"></i>
                    <div class="name">母婴</div>
                    <div class="fontclass">.icon-muying</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chengjianshiliao"></i>
                    <div class="name">餐具</div>
                    <div class="fontclass">.icon-chengjianshiliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renqungongxiao"></i>
                    <div class="name">人群 </div>
                    <div class="fontclass">.icon-renqungongxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qitakongxin"></i>
                    <div class="name">其他</div>
                    <div class="fontclass">.icon-qitakongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaren"></i>
                    <div class="name">朋友</div>
                    <div class="fontclass">.icon-jiaren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiliaofangkongxin"></i>
                    <div class="name">房子</div>
                    <div class="fontclass">.icon-shiliaofangkongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyekongxin"></i>
                    <div class="name">环保 叶子 树叶 线性</div>
                    <div class="fontclass">.icon-shouyekongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyeshixin"></i>
                    <div class="name">环保 叶子 树叶 面性</div>
                    <div class="fontclass">.icon-shouyeshixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fasongshibai"></i>
                    <div class="name">发送失败</div>
                    <div class="fontclass">.icon-fasongshibai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shareit"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-shareit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianfei"></i>
                    <div class="name">减肥减脂</div>
                    <div class="fontclass">.icon-jianfei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meirongyangyan"></i>
                    <div class="name">镜子</div>
                    <div class="fontclass">.icon-meirongyangyan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodetizhi"></i>
                    <div class="name">我心仪的球员</div>
                    <div class="fontclass">.icon-wodetizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghao"></i>
                    <div class="name">账号</div>
                    <div class="fontclass">.icon-zhanghao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang"></i>
                    <div class="name">收 藏</div>
                    <div class="fontclass">.icon-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shengri"></i>
                    <div class="name">生日</div>
                    <div class="fontclass">.icon-shengri</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontyoujiantou-copy-copy"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-iconfontyoujiantou-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baojiantiaoyang"></i>
                    <div class="name">保健品</div>
                    <div class="fontclass">.icon-baojiantiaoyang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodekongxin"></i>
                    <div class="name">我 的</div>
                    <div class="fontclass">.icon-wodekongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-buyang"></i>
                    <div class="name">蜂胶</div>
                    <div class="fontclass">.icon-buyang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodeshixin"></i>
                    <div class="name">我 的</div>
                    <div class="fontclass">.icon-wodeshixin</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
